<template>
  <div>
    <vm-status v-if="showStatus"
               empty-text="无政策支持"
               class="bg-white"
               :type="totalPages === -1 ? 'error' : 'empty'"></vm-status>

    <list v-else
          ref="list"
          :showRefresh="true"
          :showLoadMore="showLoadMore"
          @refresh="refresh"
          @loadMore="loadmore"
          loadmoreoffset="50">
      <cell v-for="(item, index) in data"
            :key="index">
        <div class="cell-wrap"
             @click="goDetail(item)">
          <div class="cell-item">
            <text class="cell-key">项目名称</text>
            <text class="cell-value">{{item.capital_source}}</text>
          </div>
          <div class="cell-item">
            <text class="cell-key">金额</text>
            <text class="cell-value">{{item.funds}}</text>
          </div>
          <div class="cell-item">
            <text class="cell-key">资金用途</text>
            <text class="cell-value">{{item.capital_use}}</text>
          </div>
          <div class="cell-item">
            <text class="cell-key">备注</text>
            <text class="cell-value">{{item.remark}}</text>
          </div>
          <div class="icon-wrap">
            <text class="icon icon-delete"
                  @click="deleteData(item)">&#xe63f;</text>
          </div>
        </div>
      </cell>
    </list>
  </div>
</template>
<script>
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmStatus },
  props: {},
  data() {
    return {
      relatedId: '',
      params: {
        index: 1,
        size: 20,
        'customer_id.eq': ''
      },
      data: [],
      totalPages: 2,
      table: 'datum_customer_finance_capital_source'
    }
  },
  computed: {
    showLoadMore() {
      return this.totalPages > this.params.index
    },
    showStatus() {
      return this.totalPages === -1 || !this.data.length
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (!params) { return }
      if (params.type === 1) {
        this.refresh()
      }
    }
  },
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.$router.getParams().then(res => {
        const data = res || {}
        this.relatedId = res.customer_related_id || ''
        this.params['customer_id.eq'] = this.farm.id
        this.refresh()
      })

      this.$navigator.setRightItem({
        text: '添加'
      }, () => {
        this.goDetail()
      })
    },
    refresh() {
      this.params.index = 1
      this.getData().then(res => {
        this.data = res
      }).finally(() => {
        this.$refs["list"].refreshEnd()
      })
    },
    loadmore() {
      this.getData().then(res => {
        this.data.push(...res)
      }).finally(() => {
        this.$refs["list"].loadMoreEnd()
      })
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'credit',
          table: this.table,
          params: this.params,
          order: { create_time: 'desc' },
          errorMsg: '获取政策支持失败'
        }).then(res => {
          this.params.index++
          this.totalPages = res && res.totalPages || 0
          const data = res && res.data || []
          resolve(data)
        }).catch(err => {
          this.totalPages = -1
          reject(err)
        })
      })
    },
    goDetail(row) {
      this.$nav.open({
        name: 'credit.increase.policy.edit',
        params: { data: row, relatedId: this.relatedId }
      })
    },
    deleteData(row) {
      this.$dialog.show({
        title: '提示',
        content: `确认删除政策支持：${row.capital_source}？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositive: () => {
          this.$api.deleteData({
            server: 'credit',
            table: this.table,
            id: row.id,
            errorMsg: '删除失败'
          }).then(res => {
            this.$notice.toast({ message: '删除成功' })
            this.refresh()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.cell-wrap {
  padding-top: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}
.cell-item {
  padding-bottom: 5px;
  flex-direction: row;
}
.cell-key {
  padding-left: 30px;
  padding-right: 30px;
  color: #999;
}
.cell-value {
  flex: 1;
  text-align: right;
  padding-left: 30px;
  padding-right: 30px;
}

.icon-wrap {
  background-color: #fff;
  align-items: flex-end;
  border-top-width: 1px;
  border-top-color: $border-color-light;
}
.icon-delete {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
  color: $warning;
}
</style>
